<template>
  <px-dialog v-model="visible" class="view-equip-detail" title="详情" width="960px" @open="openDialog" @close="closeDialog">
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">事件主题</div>
          <div class="text">{{ formValue.eventTopic || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item half">
          <div class="label">发生时间</div>
          <div class="text">{{ formValue.happenTime || "-" }}</div>
        </div>
        <div class="view-equip-item half">
          <div class="label">负责人</div>
          <div class="text">{{ formValue.managerName || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">事件内容</div>
          <div class="text">{{ formValue.eventContent || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">事件原因</div>
          <div class="text">{{ formValue.eventReason || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">处理过程</div>
          <div class="text">{{ formValue.treatingProcesses || "-" }}</div>
        </div>
      </div>
    </div>
    <div class="equip-dialog-footer" style="text-align: right">
      <px-button type="primary" @click="closeDialog">关闭</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

// 父级传过来的值
const emits = defineEmits(["closeDialog"]);
const props = defineProps(["dialogVisible", "dialogRow"]);
const visible = computed(() => props.dialogVisible);

const formValue = ref({
  eventTopic: "",
  happenTime: "",
  managerName: "",
  eventContent: "",
  eventReason: "",
  treatingProcesses: ""
});

// 打开弹窗
const openDialog = async () => {
  formValue.value = JSON.parse(JSON.stringify(props.dialogRow));
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {
    eventTopic: "",
    happenTime: "",
    managerName: "",
    eventContent: "",
    eventReason: "",
    treatingProcesses: ""
  };
  emits("closeDialog");
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/view-detail.scss");
</style>
